import React, { Component } from 'react'
import {Card,Form, Input, Button ,message,Breadcrumb} from 'antd'
import wangEditor from "wangeditor"
import {getArt,  updateArt} from "@api"
//设置表单显示样式布局
const layout = {
  labelCol: {
    span:2,
  },
  wrapperCol: {
    span: 20,
  },
};
  export default class ArtEdit extends Component {
    constructor(){
      super();
      this.state={
        edit:null,
        article:null
      }
    }
    render() {
      return (
        <div>
           <Breadcrumb style={{color:"#000",fontSize:"20px",paddingBottom:"10px"}} separator=">">
              <Breadcrumb.Item href="/admin">主页</Breadcrumb.Item>
              <Breadcrumb.Item>文章编辑</Breadcrumb.Item>
          </Breadcrumb>
          <Card>
              {this.state.article?
              <Form {...layout}
              name="basic" 
              initialValues= { this.state.article }
              onFinish={ this.submit }>
               <Form.Item
                 name='title'
                 label="标题"
                 rules={[
                   {
                     required: true,
                     message:"请输入标题"
                   },
                 ]}
               >
                 <Input />
               </Form.Item>
               <Form.Item
                 name='author'
                 label="作者"
                 rules={[
                   {
                     required: true,
                     message:"请输入作者"
                   },
                 ]}
               >
                 <Input />
               </Form.Item>
               <Form.Item
                 name='desc'
                 label="描述"
                 rules={[
                   {
                     required:true,
                     message:"请输入文章描述"
                   },
                 ]}
               >
                 <Input.TextArea rows={6}/>
               </Form.Item>
               <Form.Item 
                   name='content' 
                   label="文章内容">
                  <div id="txt"></div>
               </Form.Item>
               <Form.Item wrapperCol={ { offset:10,span:14 } }>
                 <Button type="primary" htmlType="submit">
                   确认更改
                 </Button>
               </Form.Item>
             </Form>:""}
          </Card> 
        </div>
      )
    }
    componentDidMount(){
      //初始时发送请求获取数据
      this.getArticle()
    }
    //初始化富文本
    initRichText=()=>{
      this.setState({
        edit: new wangEditor("#txt")
      },()=>{
        this.state.edit.create()
        //设置初始值
        this.state.edit.txt.html(this.state.article.content)
      })
    }
    //发送请求获取指定id的文章的详细信息
    getArticle =  ()=>{
      getArt(parseInt(this.props.match.params.id)).then(res=>{
        console.log(res.data)
          if(res.data.code==="0"){
            this.setState({
              article:res.data.data
            },()=>{
              this.initRichText()
            })
          }       
      })
     }
     submit=(params)=>{
       params.content=this.state.edit.txt.html()
       params.count=0
       params.createAt=Date.now()
       updateArt(params).then(res=>{
         message.success(res.data.msg)
       })
    }
  }
